<template>
	<!-- 订单详情页面 -->
	<view class="content">
		<view class="tp">
			<!-- fahuo==true是已发货状态 -->
			<view class="tp_tit" v-if="fahuo==false">买家已付款</view>
			<view class="tp_tit" v-else>卖家已发货</view>
			<view class="tp_text">订单金额：¥ 12.80</view>
		</view>
		<view class="bigtp">
			<navigator class="top_box" hover-class="none" url="./express" v-if="fahuo" style="padding-bottom:20rpx;border-bottom:2rpx solid #ededed;">
				<image class="top_box_left" mode="widthFix" src="../../static/fa.png" style="width:50rpx;"></image>
				<view class="top_box_cen">
					<view class="top_box_cen_tp">
						<view class="name">快递公司:</view>
						<view class="tel" style="margin-left:30rpx;">中通快递</view>
					</view>
					<view class="top_box_cen_bt">
					快递单号:773055303511257
					</view>
				</view>
				<image class="top_box_left" mode="widthFix" src="../../static/rightimg.png"></image>
			</navigator>
		<view class="top_box" :style="{'padding-top':fahuo ? '20rpx' : 0}">
			<image class="top_box_left" mode="widthFix" src="../../static/mem11.png"></image>
			<view class="top_box_cen">
				<view class="top_box_cen_tp">
					<view class="name">收货人：张新超</view>
					<view class="tel" style="margin-left:30rpx;">13925509476</view>
				</view>
				<view class="top_box_cen_bt">
					广东省东莞市南城 广东省东莞市南城区豪岗和塘四巷1号二楼(永家公寓，不在家时，请到二楼房东签收)
				</view>
			</view>
		</view>
		</view>
		
		<view class="shop_box">
			<view class="kms">
				<image mode="widthFix" class="jms_img" src="../../static/cos9.png"></image>
				订单明细:</view>
			<view class="item_ul">
						<view class="item_li" v-for="(shop,index) in shop" :key="index">
							<view class="addbgli">
							<view class="item_li_left">
								<image :src="shop.src" mode="widthFix"></image>
							</view>
							<view class="item_li_right" hover-class="none" url="../goods/detail">
								<navigator class="item_li_right_tp" hover-class="none" url="../goods/detail">
									{{shop.title}}
								</navigator>
								<view class="item_li_right_bt">
									<view class="item_li_right_bt_left">
									<view class="newmoney">￥{{shop.newmoney}}</view>
									<view class="oldmoney">￥{{shop.oldmoney}}</view>
									</view>
									<view class="item_li_right_bt_right">
										x{{shop.gui}}
									</view>
								</view>
							</view>
						</view>
					</view>
					</view>
		</view>
		
		<view class="jk_ul">
			<li class="jk_li">
				<view class="jk_li_left">商品小计</view>
				<view class="jk_li_right">¥ 12.80</view>
			</li>
			<li class="jk_li">
				<view class="jk_li_left">运费</view>
				<view class="jk_li_right">¥ 0.00</view>
			</li>
			<li class="jk_li">
				<view class="jk_li_left">潮人豆抵扣</view>
				<view class="jk_li_right">-¥ 12.80</view>
			</li>
			<li class="jk_li">
				<view class="jk_li_left">实付费(含运费)</view>
				<view class="jk_li_right" style="color:red;font-weight: 500;">¥ 0.00</view>
			</li>
		</view>
		
		<view class="jk_ul jk_ul2">
			<li class="jk_li">
				<view class="jk_li_left">订单编号:</view>
				<view class="jk_li_right">ME20200910141145874288</view>
			</li>
			<li class="jk_li">
				<view class="jk_li_left">创建时间:</view>
				<view class="jk_li_right">2020-09-10 14:11:45</view>
			</li>
			<li class="jk_li">
				<view class="jk_li_left">支付时间:</view>
				<view class="jk_li_right">2020-09-10 14:11:46</view>
			</li>
		</view>
		
		<view style="height:100rpx">
		<view class="jie_box">
			<view class="play_btn" @tap="tuiplay">申请退款</view>
		</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
	</view>
</template>

<script>
import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				fahuo:true,  //已经发货状态为true，显示物流
				shop:[  //商品合集
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:22.80,
					oldmoney:39.00,
					value:3,  //商品的数量，计算价格
					gui:'2盒',
					},
					{
					src:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg',
					title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏',
					newmoney:22.80,
					oldmoney:39.00,
					value:2,  //商品的数量，计算价格
					gui:'2盒',
					}
				],
			}
		},
		methods:{
			tuiplay (){
				uni.navigateTo({
					url:'./tuikuan'
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.tp{
		width:100%;
		padding:35rpx 0;
		text-align: center;
		color:#fff;
		background: linear-gradient(to right, #ff80c0 0%,#ff80c0 100%);
	}
	.tp_tit{
		font-size:35rpx;
		margin-bottom:5rpx;
	}
	.tp_text{
		font-size:28rpx;	
	}
	.bigtp{
		width:100%;
		margin:20rpx auto;
		background-color: #fff;
		padding:30rpx 0;
	}
	.top_box{
		width:95%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin:0 auto;
	}
	.top_box_left{
		width:35rpx;
	}
	.top_box_cen{
		width:85%;
		margin-left:5%;
	}
	.top_box_cen_tp{
		display: flex;
		align-items: center;
	}
	.name,.tel{
		font-size:28rpx;
	}
	.top_box_cen_bt{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    font-size: 24rpx;
		    color: #666;
			margin-top:10rpx;
	}
.shop_box{
		padding:15rpx 0;
		margin:25rpx 0;
		background-color: #fff;
	}
	.kms{
		width:95%;
		margin:0 auto;
		font-size:30rpx;
		color:#000;
		display: flex;
		align-items: center;
	}
	.jms_img{
		width:40rpx;
		margin-right:10rpx;
	}
	.item_ul{
		width:100%;
	}
	.item_li{
		width:100%;
		background-color: #fff;
		border-bottom:2rpx solid #ededed;
	}
	.item_li:nth-last-child(1){
		border:none;
	}
	.addbgli{
		width:93%;
		margin:0 auto;
		padding:30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_li:nth-child(1){
		margin-top:0;
	}

	.item_li_left{
		width:25%;
		display: flex;
		justify-content: flex-start;
		align-items: center
	}
	.item_li_left image{
		width:100%;
	}
	.item_li_right{
		width:70%;
	}
	.item_li_right_tp{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    white-space: normal;
			font-size:27rpx;
	}
	.item_li_right_bt{
		margin-top:25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_li_right_bt_left{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.item_li_right_bt_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.newmoney{
		color: #ff80c0;
		margin-right:15rpx;
		font-size:30rpx;
		font-weight: 500;
	}
	.oldmoney{
		font-size:25rpx;
		text-decoration: line-through;
		color:#666;
	}
	uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
		border-color:rgb(255, 128, 192);
	}
	.jk_ul{
		padding:25rpx 0;
		background-color: #fff;
		margin:20rpx 0;
	}
	.jk_li{
	width:93%;
	margin:15rpx auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	.jk_li:nth-child(1){
		margin-top:0;
	}
	.jk_li_left{
		color:#666;
	}
	.jk_ul2 .jk_li{
			justify-content: flex-start;
			font-size:24rpx;
	}
	.jk_ul2 .jk_li .jk_li_left{
		width:20%;
	}
	.jk_ul2 .jk_li .jk_li_right{
		color:#666;
	}
	.jie_box{
		width:100%;
		height:95rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		bottom:0;
		z-index: 999;
	}
	.play_btn{
		width:30%;
		height:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ccc;
		color:#fff;
		font-size: 30rpx;
		margin-left:30rpx;
	}
</style>
